<template>
    <div class="select_order_bill_container">
        <el-form label-width="0px" @submit.native.prevent>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClickTabs">
                <template v-for="(item, index) in tabsList">
                    <el-tab-pane :key="index" :label="showLabelName(item)" :name="item.name">
                        <select-order-and-bill-item v-bind="item" :data-list="dataList"
                                                    @selected="handleSelected" />
                    </el-tab-pane>
                </template>
            </el-tabs>
        </el-form>
    </div>
</template>

<script>
import clothing from "@jxc/utils/clothing";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "SelectOrderAndBill",
    components: {
        SelectOrderAndBillItem: () => import('./SelectOrderAndBillItem'),
    },
    props: {
        data: {
            type: Object,
            default() {
                return null;
            },
        },
    },
    data() {
        const _this = this;
        return {
            setting: {},
            activeName: 'sale',
            dataList: [],
            orderTableOptions: {
                ref: "JxcSelectOrderTable",
                rowId: 'src_sid',
                multiSelect: true,
                showSummary: true,
                summaryArray: [ 'qty', 'amount' ],
                columns: [],
                baseColumns: [
                    {
                        label: "日期",
                        prop: "the_date",
                        align: "center",
                        width: 90,
                        permission: [ 'sale', 'buy' ],
                    },
                    {
                        label: "物料",
                        prop: "goods_name",
                        align: "center",
                        permission: [ 'sale', 'buy' ],
                    },
                    {
                        label: "规格",
                        prop: "spec_info",
                        align: "center",
                        permission: [ 'sale', 'buy' ],
                        tooltip: false,
                        cellRender: {
                            name: 'TagList',
                            showTag: true,
                            tagField: 'name',
                            tagTextFun(item) {
                                return `${ item.specification }：${ item.value }`;
                            },
                        },
                    },
                    {
                        label: "单位",
                        prop: "unit",
                        align: "center",
                        width: 90,
                        permission: [ 'sale', 'buy' ],
                    },
                    {
                        label: "数量",
                        prop: "qty",
                        align: "right",
                        headerAlign: 'center',
                        footerAlign: 'center',
                        width: 90,
                        permission: [ 'sale', 'buy' ],
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 3, true),
                    },
                    {
                        label: "单价",
                        prop: "price",
                        align: "right",
                        headerAlign: 'center',
                        footerAlign: 'center',
                        width: 100,
                        permission: [ 'sale', 'buy' ],
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 4),
                    },
                    {
                        label: "金额",
                        prop: "amount",
                        align: "right",
                        headerAlign: 'center',
                        footerAlign: 'center',
                        width: 100,
                        permission: [ 'sale', 'buy' ],
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                ],
                getMaxHeight() {
                    return $(_this.getActiveTabsContainer()).height() * 0.8 - 120;
                },
            },
            fundTableOptions: {
                ref: "JxcSelectFundTable",
                rowId: 'src_sid',
                multiSelect: true,
                showSummary: true,
                summaryArray: [ 'payment_amount' ],
                columns: [
                    {
                        label: "日期",
                        prop: "the_date",
                        align: "center",
                        minWidth: 90,
                    },
                    {
                        label: "账单类型",
                        prop: "goods_name",
                        align: "center",
                        minWidth: 90,
                    },
                    {
                        label: "金额",
                        prop: "payment_amount",
                        align: "right",
                        headerAlign: 'center',
                        footerAlign: 'center',
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                ],
                getMaxHeight() {
                    return $(_this.getActiveTabsContainer()).height() * 0.8 - 120;
                },
            },
            selectionList: [],
            tabsList: [],
        };
    },
    watch: {
        data: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        showLabelName(item) {
            let list = [];
            if (item.name === 'order') {
                if (['sale', 'pcbSale'].indexOf(item.type) !== -1) {
                    list.push('销售单');
                } else {
                    list.push('采购单');
                }
            } else if (item.name === 'fund') {
                if (['sale', 'pcbSale'].indexOf(item.type) !== -1) {
                    list.push('收款单');
                } else {
                    list.push('付款单');
                }
            } else if (item.name === 'in_bill') {
                list.push('入库单');
            } else if (item.name === 'out_bill') {
                list.push('出库单');
            }
            list.push('（总数量：');
            let filter = this.dataList.filter(t => t.src_type === item.name);
            list.push(filter.length);
            list.push(' 已选择：')
            list.push(item.selectedList.length);
            list.push('）');
            return list.join('');
        },
        async init() {
            const _this = this;
            if (!_this.data) {
                return;
            }
            _this.selectionList = [];
            _this.activeName = _this.data.type;
            _this.setting = $.extend({}, _this.data.setting);
            _this.initTableOptions();
            _this.initTabs();
            _this.initData();
        },
        initTabs() {
            const _this = this;
            _this.tabsList = [];
            if (_this.setting.reconciliation_source === 'stockBill') {
                _this.tabsList.push({
                    type: _this.type,
                    name: 'in_bill',
                    selectedList: [],
                    table: $.extend({}, _this.orderTableOptions),
                });
                _this.tabsList.push({
                    type: _this.type,
                    name: 'out_bill',
                    selectedList: [],
                    table: $.extend({}, _this.orderTableOptions),
                });
                _this.tabsList.push({
                    type: _this.type,
                    name: 'fund',
                    selectedList: [],
                    table: $.extend({}, _this.fundTableOptions),
                });
            } else {
                _this.tabsList.push({
                    type: _this.type,
                    name: 'order',
                    selectedList: [],
                    table: $.extend({}, _this.orderTableOptions),
                });
                _this.tabsList.push({
                    type: _this.type,
                    name: 'fund',
                    selectedList: [],
                    table: $.extend({}, _this.fundTableOptions),
                });
            }
            _this.activeName = _this.tabsList[0].name;
        },
        initTableOptions() {
            const _this = this;
            let columns = _this.orderTableOptions.baseColumns.map(item => $.extend({}, item));
            columns = columns.filter(item => item.permission.indexOf(_this.data.type) !== -1);
            columns = clothing.resetTableColumns(_this.setting, columns);
            _this.orderTableOptions = $.extend({}, _this.orderTableOptions, { columns });
        },
        initData() {
            const _this = this;
            let selectedList = (_this.data.selectList || []).map(item => item.sid);
            let selectedSrcList = (_this.data.selectList || []).map(item => item.src_sid);
            return _this.fetchData(_this.$api.API_GetJxcFinancePaymentRequestDetail4Select, {
                type: _this.data.type,
                request_sid: _this.data.sid,
                client_sid: _this.data.client_sid,
                supplier_sid: _this.data.supplier_sid,
                selected_list: selectedList,
            }).then(res => {
                _this.dataList = _this.resetIndex(res.data, 'sn');
                let filterSelected = _this.dataList.filter(t => selectedSrcList.indexOf(t.src_sid) !== -1);
                if (!_this.$utils.isNotEmptyList(filterSelected)) {
                    filterSelected = _this.dataList;
                }
                _this.tabsList = _this.tabsList.map(item => {
                    let obj = $.extend({}, item);
                    obj.selectedList = filterSelected.filter(t => t.src_type === item.name);
                    return obj;
                });
            }).catch(() => {
            });
        },
        handleClickTabs(tab) {
            this.activeName = tab.name;
        },
        handleSelected(name, selectionList) {
            const _this = this;
            _this.tabsList = _this.tabsList.map(item => {
                let obj = $.extend({}, item);
                if (item.name === name) {
                    obj.selectedList = selectionList;
                }
                return obj;
            });
        },
        async confirm() {
            const _this = this;
            let list = [];
            _this.tabsList.forEach(item => {
                if (_this.$utils.isNotEmptyList(item.selectedList)) {
                    list = list.concat(item.selectedList.map(item => $.extend({}, item)));
                }
            });
            if (!_this.$utils.isNotEmptyList(list)) {
                _this.$message.error('请选择单据');
                return false;
            }
            list = list.sort((a, b) => a.sn - b.sn);
            list.forEach((item, index) => {
                item.sn = index + 1;
            });
            _this.selectionList = list;
            return true;
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.select_order_bill_container {
    width: 100%;
    height: 100%;
    overflow: hidden;

    /deep/ .el-tabs__header {
        margin: 0;
    }

    /deep/.el-tabs__content {
        border: 1px solid #E4E7ED;
        border-top: none;
        padding: 5px;
    }
}
</style>
